<template>
  <div class="app-container">
    <el-container style="border: 1px solid #eee">
      <el-header style="height:auto;">
        <el-select v-model="manual_process" placeholder="类型" @change="getList">
          <el-option label="所有" value="all" />
          <el-option label="手动处理" value="true" />
          <el-option label="自动处理" value="false" />
        </el-select>
        <el-input
          v-model="kwInput"
          placeholder="关键词进行搜索"
          style="width: 80%"
          clearable
          class=""
          @keyup.native.enter="handleSearch"
        >
          <el-button slot="append" style="width: 180px" type="success" icon="el-icon-search" @click="handleSearch">搜索
          </el-button>
        </el-input>
        <el-button
          style="margin-top: 10px;margin-right: 10px;"
          type="text"
          @click="uploadforbiddenkeywordVisuable=true"
        >违禁词
        </el-button>
      </el-header>
      <el-main>
        <el-table
          v-loading="listLoading"
          :data="data"
          border
          :default-sort="{prop: 'create_at', order: 'descending'}"
          style="width: 100%"
          @sort-change="handleSort"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            fixed
            prop="image"
            width="120"
            label="产品"
          >
            <template slot-scope="scope">
              <a :href="scope.row.ps_url" target="_blank"><img :src="scope.row.image" width="90"></a>
            </template>
          </el-table-column>
          <el-table-column
            fixed
            sortable="custom"
            prop="website__domain"
            label="网站"
          >
            <template slot-scope="scope">
              <a :href="scope.row.ps_url" target="_blank">{{ scope.row.website__domain }}</a>
            </template>
          </el-table-column>
          <el-table-column
            fixed
            sortable="custom"
            prop="name"
            label="标题"
          />
          <el-table-column
            fixed
            sortable="custom"
            prop="ps_product_id"
            label="产品ID"
          />
          <el-table-column
            fixed
            sortable="custom"
            prop="orders"
            label="orders"
          />
          <el-table-column
            fixed
            sortable="custom"
            prop="keyword"
            label="keyword"
          />
          <el-table-column
            fixed
            prop="manual_process"
            label="manual_process"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.manual_process"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="ChangeStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            width="300"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="handleShowFastModifyFeed(scope.row)">删除产品</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除记录</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          v-if="data.length"
          background
          class="mt-pagination"
          :current-page="page"
          :page-sizes="[10,20,50,100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </el-main>
    </el-container>
    <forbiddenkeyword
      :is-visible="uploadforbiddenkeywordVisuable"
      @closeMyDialog="uploadforbiddenkeywordVisuable=false"
    />
    <feedfastmodify
      :domain="feedfastmodify_domain"
      :website_id="feedfastmodify_website_id"
      :product_id="feedfastmodify_product_id"
      :is-visual="feedFastModifyVisible"
      @closeMyDialog="feedFastModifyVisible=false"
    />
  </div>
</template>

<script>
import { Get, Put, Delete } from '@/api/erp/crawl/deletedproductsbykeyword'
import forbiddenkeyword from '@/views/crawl/elements/forbiddenkeyword'
import qs from 'qs'
import Feedfastmodify from '../orders/element/feedfastmodify'

const orderMapper = {
  'ascending': 0,
  'descending': 1,
  'null': ''
}

export default {
  components: { Feedfastmodify, forbiddenkeyword },
  data() {
    return {
      feedfastmodify_domain: '',
      feedfastmodify_website_id: '',
      feedfastmodify_product_id: '',
      feedFastModifyVisible: false,
      uploadforbiddenkeywordVisuable: false,
      data: [],
      manual_process: 'true',
      order_by: 'orders',
      order_desc: '',
      // pagination
      kwInput: '',
      tagInput: '',
      pagesize: 10,
      page: 1,
      total: 0
    }
  },

  created() {
    this.getList()
  },
  methods: {
    handleShowFastModifyFeed(row) {
      if (row.ps_product_id === '') {
        this.$message({
          type: 'info',
          message: '产品ID不能为空'
        })
        return
      }
      this.feedfastmodify_domain = row.website__domain
      this.feedfastmodify_website_id = row.website_id
      this.feedfastmodify_product_id = row.ps_product_id
      console.log(this.feedfastmodify_domain, this.feedfastmodify_product_id, this.feedfastmodify_website_id)
      this.feedFastModifyVisible = true
    },
    handleSearch() {
      this.page = 1
      this.getList()
    },
    getList() {
      this.listLoading = true
      Get(null, qs.stringify({
        manual_process: this.manual_process,
        kw: this.kwInput,
        pagesize: this.pagesize,
        page: this.page,
        order_by: this.order_by,
        order_desc: this.order_desc
      }))
        .then(response => {
          this.data = response.data.data
          this.listLoading = false
          this.total = response.data.total
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    ChangeStatus(row) {
      Put(row.id, row).then((response) => {
        this.innerDialogVisible = false
        this.$emit('reload')
        this.getList()
        this.notify('更新成功')
      })
    },
    handleDelete(row) {
      this.$confirm(`确认要删除关键词  ${row.keyword}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Delete(row.id).then((response) => {
          this.innerDialogVisible = false
          this.getList()
          this.notify('删除成功')
        })
      }).catch(() => {
      })
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    handleSort(v) {
      this.order_by = v.prop
      this.order_desc = orderMapper[v.order]
      this.getList()
    }
  }
}
</script>

<style scoped>

.app-container >>> .input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.app-container >>> .text {
  font-size: 14px;
}

.app-container >>> .pointer {
  cursor: pointer;
  color: #409EFF;
}

.app-container >>> a:visited {
  color: purple;
}

.app-container >>> a:link {
  color: #409EFF;
}

.app-container >>> a:active {
  color: red;
}

.app-container >>> a:hover {
  color: red;
  text-decoration: underline;
}
</style>
